	<template>
    <div class="customTable">
        <el-table 
        v-bind="attrs"
        ref="multipleTableRef"
        :data="tableData.data"
        style="width: 100%"
        :height="tableData.pagination == true?'calc(100% - 32px)':'100%'"
        :stripe="tableData.stripe"
        :header-cell-style="tableData.headerStyle"
        :highlight-current-row="tableData.highlight"
        @selection-change="table.handleSelectionChange"
        @row-click="table.rowClick"
        >
            <el-table-column type="selection" width="55" v-if="tableData.selection" />
            <el-table-column type="index" width="50" :index="indexMethod" v-if="tableData.index" />
            <el-table-column v-for="item in tableData.column" :align="item.align" :sortable="item.sortable" :key="item.id" :prop="item.prop" :label="item.name" :width="item.width">
                <template #default="scope">
                    <slot v-if="item.slotname" :scope="scope" :name="item.slotname"></slot>
                    <div v-else>
                        {{scope.row[item.prop]}}
                    </div>
                </template>
            </el-table-column>
            <slot name="customization"></slot>
        </el-table>
        <div class="pagination" 
			v-if="tableData.pagination"
			:style="{display:'flex',justifyContent:tableData.pagePosition == 'right'?'flex-end':tableData.pagePosition == 'center'? 'center' : 'flex-start'}"
		>
            <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes=" tableData.sizeList || [10, 20, 30, 50]"
                :layout="tableData.layout || 'total, sizes, prev, pager, next, jumper'"
                :total="tableData.data.length"
                @size-change="pagination.handleSizeChange"
                @current-change="pagination.handleCurrentChange"
            />
        </div>
    </div>
</template>
<script setup>
const emits = defineEmits();
// attrs继承父组件未通过props获取的属性方法
const attrs = useAttrs();
const multipleTableRef = ref()
/**
const tableData = reactive({
    column:[{id:4,name:'表头名称',slotname: '插槽名称',width:'宽度',prop:'数据字段',sortable:'排序(true/false)',align:(center/left/right)}], //表头
    data:[], //表格数据  
    stripe:true, //是否开启斑马线
    selection:false, // 是否多选
	index:false, //是否显示序号 
    highlight:false, //是否高亮
    headerStyle:{background:'#E6F0FE',color:'#147AF7'}, //表头样式
    isTable:false, // 是否开启表格
    pagination:false, //是否开启分页
    sizeList:[100,200,300,500], // 分页 条/页
    layout:"total, sizes, prev, pager, next, jumper",  // 分页组件配置
    pagePosition:'left',  //分页位置 (left center right) 
    currentPage:1, //分页页数
    pageSize: 10,  //每页条数
})
*/
const props = defineProps({
    tableData:Object,
})
const table = reactive({
    multipleSelection:[],
    handleSelectionChange(val){
        table.multipleSelection = val
        emits('multipleSelection',table.multipleSelection)
    },
    rowClick(val){
        emits('rowClick',val)
    }
})
const indexMethod = (index) => {
  return index * 1 + 1
}
watch(props.tableData,()=>{
    pagination.currentPage = props.tableData.currentPage
    pagination.pageSize = props.tableData.pageSize
})
const pagination = reactive({
    currentPage:1,
    pageSize:props.tableData.sizeList?props.tableData.sizeList[0]:10,
    handleSizeChange(){
        emits('pagination',pagination)
    },
    handleCurrentChange(){
        emits('pagination',pagination)
    }
})
</script>
<style lang="less" scoped>
.customTable{
    width: 100%;
    height: 100%;
}
</style>
